<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container mt-5">
      <form action="">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            type="text"
            name="username"
            id="username"
            class="form-control"
            placeholder="输入用户名"
            aria-describedby="username"
          />
          <small id="helpId" class="text-muted">输入用户名</small>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="text"
            name="password"
            id="password"
            class="form-control"
            placeholder="输入密码"
            aria-describedby="password"
          />
          <small id="password" class="text-muted">输入密码</small>
        </div>
        <div class="form-group row">
          <img src="/book/code" alt="code" class="col-sm-2" />
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              name="code"
              id="code"
              placeholder="输入验证码"
            />
          </div>
        </div>
        {% csrf_token %}
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <script>
      $(function() {
        $("button[type=submit]").click(function(e) {
          e.preventDefault();
          var data = $("form").serialize();
          $.ajax({
            url: "/book/form",
            method: "post",
            data: data,
            success: function(response) {
              return alert(response.msg);
            }
          });
        });
      });
    </script>
  </body>
</html>
